<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <label for="customname">输入自定义名字：</label>
        <input id="customname" type="text" placeholder="李雷" />
    </div>
    <div>
        <label for="metric">公制</label>
        <input id="metric" type="radio" name="measure" value="metric" checked />
        <label for="american">美制</label>
        <input id="american" type="radio" name="measure" value="american"/>
    </div>
    <div>
        <button class="randomize">生成随机笑话</button>
    </div>
    <p class="story"></p>

    <script>
    /** @type {HTMLInputElement} */
    const customName = document.getElementById('customname');
    /** @type {HTMLInputElement} */
    const american = document.getElementById('american');
    /** @type {HTMLInputElement} */
    const randomize = document.querySelector('.randomize');
    /** @type {HTMLParagraphElement} */
    const story = document.querySelector('.story');

    function randomValueFromArray(array){
        const random = Math.floor(Math.random()*array.length);
        return array[random];
    }

    let storyText = `
    今天气温 35 摄氏度，:insertx:出门散步。
    当走到:inserty:门前时，突然就:insertz:。
    人们都惊呆了，李雷全程目睹但并没有慌，
    因为:insertx:是一个 140 公斤的胖子，天气又辣么热。
    `;
    let insertX = ['怪兽威利', '大老爹', '圣诞老人'];
    let insertY = ['肯德基', '迪士尼乐园', '白宫'];
    let insertZ = ['自燃了', '在人行道化成了一坨泥', '变成一只鼻涕虫爬走了'];
    randomize.addEventListener('click', result);

    function result(){
        let newStory = storyText;

        let xItem = randomValueFromArray(insertX);
        let yItem = randomValueFromArray(insertY);
        let zItem = randomValueFromArray(insertZ);

        newStory = newStory.replace(':insertx:', xItem);
        newStory = newStory.replace(':inserty:', yItem);
        newStory = newStory.replace(':insertz:', zItem);

        if(customName.value !== ''){
            const name = customName.value;
            newStory = newStory.replace('李雷', name);
        }
        if(american.checked){
            const weight = Math.round(140*2.20462)+'磅';
            const temperature = Math.round(35*9/5+32)+'华氏度';
            newStory = newStory.replace('35 摄氏度', temperature);
            newStory = newStory.replace('140 公斤',weight);
        }

        story.textContent = newStory;
        story.style.visibility = 'visible';
    }
    </script>
    

</body>
</html>